<template>
  <div>
    <heaDer></heaDer>
    <div
      style="width: 50%; text-align: center; margin: 5% auto"
      v-show="xianshi"
    >
      <van-loading />
    </div>
    <div>
      <template v-for="(item, index) in questionnaireList">
        <div class="single">
          <div>
            <div class="one_line" >{{ item.title }}</div>
            <div style="width: 100%; color: #aeaeae; font-size: 12px">
              {{ item.createTime || "时间" }}
			  <div
                v-if="item.isOk == 0"
                @click="writeQuestion(item.id)"
                class="but"
                style="
                 background-color: orange;
                 color: rgb(255, 255, 255);
                 padding: 4px 6px;
                 border-radius: 14px;
                 font-size: 14px;
                 float: right;
                 margin-top: -3%;
                "
              >
                填写
              </div>
              <div
                v-if="item.isOk == 1"
                class="but"
                @click="finished(0)"
                style="
                 background-color: rgb(174, 174, 174);
                 color: rgb(255, 255, 255);
                 padding: 4px 6px;
                 border-radius: 14px;
                 font-size: 14px;
                 float: right;
                 margin-top: -3%;
                "
              >
                已完成
              </div>
            </div>
          </div>
          <div style="clear: both"></div>
        </div>
      </template>
      <div class="mainnn" v-show="yincang">
        <div class="zwxximg">
          <img src="../../../assets/zwxx.png" alt="" />
        </div>
        <div class="zwxx">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import request from "@/utils/request";
import heaDer from "@/components/page/header/header.vue";

export default {
  components: {
    heaDer,
  },
  data() {
    return {
      xianshi: true,
      yincang: false,
      questionnaireList: [],
    };
  },
  mounted() {
    this.registerDay();
  },
  methods: {
    registerDay() {
      request({
        url: "/generator/questionnaire/front/list",
        method: "get",
      }).then((response) => {
        this.questionnaireList = response.list;
        this.xianshi = false;
        if (this.questionnaireList == "") {
          this.yincang = true;
        } else {
          this.yincang = false;
        }
      });
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    writeQuestion(val) {
      let userId = window.localStorage.getItem("userId");
      this.$router.push({
        name: "DetailsQuestionnaire",
        query: { row: JSON.stringify(val), shareUserId: userId },
        params: { time: new Date().getTime() },
      });
    },
    finished(type) {
      if (type == 0) {
        Toast("您已参与！");
      } else {
        Toast("活动未开始！");
      }
    },
  },
};
</script>

<style scoped="scoped">
.content {
  overflow: hidden;
  padding: 0 12px 12px;
}
.top {
  height: 40px;
}
.top > div {
  width: 50%;
  height: 100%;
  border-bottom: 1px solid #f8f8f8;
  border-color: #f8f8f8;
}
.active {
  background-color: #ffe090;
  color: orange;
  border-color: #ffe090;
}
.single {
  border-bottom: 1px solid rgb(235, 235, 235);
  /* display: flex; */
  align-items: center;
  width: 90%;
  margin: 0px auto;
  padding: 20px 0px;
}
.single > div:nth-child(1) {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
}
.single > div:nth-child(2) {
  font-size: 14px;
  color: #b9b9b9;
}
.one_line {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4%;
}
.zwxximg {
  widows: 100%;
  text-align: center;
  margin-top: 35%;
}
.zwxx {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.but{
   min-width:68px;
   text-align: center;
}
</style>

